import React from 'react';
import 'antd/dist/antd.css';
import './login.css';
import { Form, Icon, Input, Button, notification } from 'antd';
import createHistory from 'history/createBrowserHistory'

const FormItem = Form.Item;
const history = createHistory()

class Login extends React.Component {
    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if(!err) {
                let name = values.userName;
                let pwd = values.password;
                if(name==='123'&&pwd==='123') {
                    this.props.history.push('/index');
                } else {
                    this.infoNotification('info');
                }
            }
        });
    }

    infoNotification = (type) => {
        notification[type]({
            message: '用户名和密码',
            description: '都是123',
            duration: 3
        });
    }

    componentDidMount() {
        this.infoNotification('info');
    }

    render() {
        const { getFieldDecorator } = this.props.form;
        return (
            <div className="login-section">
                <Form onSubmit={this.handleSubmit} className="login-form">
                    <FormItem>
                        {getFieldDecorator('userName', {
                            rules: [{ required: true, message: '请输入用户名' }],
                        })(
                            <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" />
                        )}
                    </FormItem>
                    <FormItem>
                        {getFieldDecorator('password', {
                            rules: [{ required: true, message: '请输入密码' }],
                        })(
                            <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="Password" />
                        )}
                    </FormItem>
                    <FormItem>
                        <Button type="primary" htmlType="submit" className="login-form-button">
                            Log in
                        </Button>
                    </FormItem>
                </Form>
            </div>
        );
    }
}

const App = Form.create()(Login);

export default App;

